<template>
    <!-- ### 要求：
    + 使用 Vue 3 的响应式数据来管理一个简单的任务列表。
    + 当任务未完成时，任务名称显示为黑色，当任务完成时，任务名称显示为绿色并带有删除线。
    + 通过点击任务，可以切换任务的完成状态。
    + 使用计算属性来显示已完成任务的数量。
    + 使用条件渲染，当没有任务时，显示“没有任务”。 -->
    <div>
        <h2>任务列表</h2>
        <button @click="tasklistYN">添加任务</button>
        <!-- 当没有任务时显示 -->
        <p v-if="tasklist">没有任务</p>

        <!-- 当有任务时显示 -->
        <ul v-else>
            <li>
                <span @click="stateManagement" :class="{'completed':task,'not-completed':!task}">任务名称</span>
                <button @click="stateManagement">切换状态</button>
            </li>
        </ul>

        <p>已完成任务数:{{ completions }}</p>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

// + 任务状态管理（完成/未完成）。
// + 通过按钮切换任务的完成状态。
const task = ref(false)

function stateManagement(){
    task.value = !task.value
    task.value ? completions.value++ : completions
}
// + 动态计算并显示已完成任务的数量。
const completions = ref(0)
// + 当没有任务时，显示“没有任务”的提示。

const tasklist = ref(true)
function tasklistYN(){
    tasklist.value = false
} 



</script>

<style scoped>
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
    padding: 5px;
    display: flex;
    justify-content: space-between;
}

.completed {
    color: green;
    text-decoration: line-through;
}

.not-completed {
    color: black;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #0056b3;
}
</style>